<template>
	<div>
		<div class="title_name">
			高端PLUS
		</div>


			<div>
				<gallery_area :items="items" :box-container-class="boxContainerClass" :box-init-ratio="boxInitRatio" lastLineMode="origin"
				@loaded="loaded" @error="error">
					<template>
						<span></span>
					</template>
				</gallery_area>
			</div>

	</div>
</template>

<script>
	import gallery_area from './gallery_area.vue';
	import {
		get_photo
	} from '../../API/high_plus.js';

	export default {
		created() {
			get_photo({kind:0,price_type:0}).then(res => {
				// console.log(res, 1111111111111111111111111111)
				res.data.data.photo_list.forEach(el => {
					this.items.push({
						id: el.photo_id,

						src: el.thumb_w_url_cos,
						loading: true,
						error: false,
						ratio: el.origin_w / el.origin_h,
					})
				})
			})
		},
		components:{
			gallery_area
		},
		data() {
			return {
				items: [],
				boxContainerClass: 'box-container-margin',
				boxInitRatio: 200
			}
		},
		methods: {
			loaded() {},
			error() {}
		}
	}
</script>

<style lang="scss" scoped>
	.title_name {
		font-size: 24px;
		font-family: "microsoft yahei";
		font-weight: 700;
	}
	::v-deep .gallery-layout-box{
		padding: 2%;
	}
	::v-deep .gallery-pic-box-container{
		overflow: hidden;
		img{
			transition: all .5s;
		}
	}
	::v-deep .gallery-pic-box-container:hover{
		overflow: hidden;
		img{
			transform: scale(1.2);
		}
	}
</style>
